<!--
 * @Author: Wangtao
 * @Date: 2020-10-22 19:27:39
 * @LastEditors: Wangtao
 * @LastEditTime: 2021-01-18 16:45:46
-->
<template>
  <drawer-box>
    <template v-slot:content>
      <el-form
        class="m7-form"
        :label-position="labelPosition"
        :model="formData"
        size="mini"
        :rules="rules"
        ref="nodeForm"
      >
        <el-form-item label="节点名称" prop="name">
          <el-input v-model.trim="formData.name" size="mini"></el-input>
        </el-form-item>
        <div class="select-group" v-for="(item, index) in filterCondition" :key="index">
          <div class="select-box">
            <el-form-item :label="'时间条件'" prop="region">
              <el-select-v2
                style="width: 240px"
                size="mini"
                v-model="item.value"
                placeholder="请选择时间条件"
                filterable
                :multiple="false"
                :collapse-tags="false"
                clearable
                :options="timeConditionList"
                :remote="true"
                @change="(val: any) => selectChange(val, index)"
              >
              </el-select-v2>
            </el-form-item>
          </div>
          <div class="select-box">
            <el-form-item :label="'节点'" prop="region">
              <el-select size="mini" v-model="item.to" placeholder="请选择下一步节点" style="width: 240px" clearable>
                <el-option
                  v-for="node in nodeList"
                  :label="node.data.name"
                  :value="node.id"
                  v-show="!node.viewOnly && node.id !== currentData.id && node.id !== 'startNode'"
                  :key="node.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </div>
          <!-- <div class="select-oprate">
            <span @click="deleteCondition(item, index)"
              ><i class="MC_iconfont MC_icon-shanchu2-xian delete-span"></i
            ></span>
          </div> -->
        </div>
        <el-form-item :label="'其他时间节点'" prop="default">
          <el-select
            size="mini"
            v-model="formData.default"
            placeholder="请选择下一步节点"
            style="width: 100%"
            @change="defaultChange"
            clearable
            filterable
          >
            <el-option
              v-for="node in nodeList"
              :label="node.data.name"
              :value="node.id"
              v-show="!node.viewOnly && node.id !== currentData.id && node.id !== 'startNode'"
              :key="node.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </template>
    <template v-slot:operation>
      <el-button @click="cancel" size="mini">取消</el-button>
      <el-button type="primary" @click="onSubmit" size="mini">确定</el-button>
    </template>
    <template v-slot:remove>
      <el-button @click="deleteNode" type="danger" :icon="Delete" size="mini">删除</el-button>
    </template>
  </drawer-box>
</template>

<script lang="ts" setup>
import drawerBox from '@/app/call-center/components/drawer-box.vue'
import { Delete } from '@element-plus/icons-vue'
import { withDefaults, defineProps, ref, onMounted, computed } from 'vue'
import useNodeCommon from './use-node-common'

const nodeForm: any = ref(null)
const props = withDefaults(
  defineProps<{
    data: any
    currentNode: any
    save: (...arg: any) => void
    cancel: () => void
    delete: (...arg: any) => void
  }>(),
  {
    data: {},
    currentNode: {}
  }
)
const {
  nodeList,
  currentData,
  labelPosition,
  rules,
  formData,
  condition,
  cancel,
  onSubmit,
  deleteNode,
  timeConditionList
}: any = useNodeCommon({
  data: props.data,
  currentNode: props.currentNode,
  nodeForm,
  save: props.save,
  cancel: props.cancel,
  delete: props.delete
})

const filterCondition = computed(() =>
  condition.value?.filter((_: any, m: number) => m !== condition.value?.length - 1)
)

onMounted(() => {
  console.log(condition.value, condition.value?.length, formData)
  if (condition.value?.length < 2) {
    condition.value.unshift({
      label: '',
      value: '',
      to: ''
    })
  }
})

const setConditionName = (dataList: any[], conditionIndex: number, key: string, value: any) => {
  dataList.some((item: any) => {
    if (item[key] === value) {
      const { _id } = item
      condition.value[conditionIndex].customValue = { timeId: _id }
      condition.value[conditionIndex].label = item.name
      return true
    }
  })
}
const selectChange = (id: any, index: number): void => {
  setConditionName(timeConditionList.value, index, '_id', id)
}

const defaultChange = (value: any) => {
  const node: any = nodeList.value.find((i: any) => i.id === value)
  condition.value[1].to = value
  Object.assign(condition.value[1], {
    to: value,
    label: node.name
  })
}

// eslint-disable-next-line no-undef
defineExpose({
  form: nodeForm
})
</script>

<style lang="stylus" scoped>
.select-oprate
  span
    padding-top 36px
    display block
    color $icon-gray
    cursor pointer
.addCondition
  display flex
  align-items center
  color: #008cee;
  cursor pointer
  margin-bottom 15px
  i
    font-size 16px
.delete-span
  &:hover
    color $c-danger
.add-span
  &:before
    margin-right 4px
</style>
